<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="$t('statistics.professionalStatistics')" name="course">
                <ConditionCard
                    body-style="padding: 24px"
                    class="groupList-addUser"
                    @search="queryTableList"
                    @reset="reset"
                >
                    <el-form
                        ref="queryForm"
                        :model="queryForm.condition"
                        label-width="80px"
                        label-suffix="："
                    >
                        <el-row :gutter="2">
                            <el-col :span="8">
                                <el-form-item :label="$t('statistics.generalSchoolYear')">
                                    <GradeSelect v-model="queryForm.condition.grade"></GradeSelect>
                                    <!-- <CalendarSelect
                                        @load-done="loadDown"
                                        v-model="queryForm.condition.calendarId"
                                    ></CalendarSelect> -->
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item :label="$t('statistics.college')">
                                    <DictSelect
                                        labelAll="请选择"
                                        v-model="queryForm.condition.faculty"
                                        :data="options.faculty"
                                        @change="handleChangeFaculty"
                                    ></DictSelect>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item :label="$t('statistics.major')">
                                    <DictSelect
                                        labelAll="请选择"
                                        v-model="queryForm.condition.profession"
                                        :data="options.profession"
                                    ></DictSelect>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="2">
                            <el-col :span="8">
                                <el-form-item :label="$t('statistics.majorCode')">
                                    <el-input
                                        v-model="queryForm.condition.professionCode"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </ConditionCard>
            </el-tab-pane>
            <el-tab-pane :label="$t('statistics.collegeStatistics')" name="faculty">
                <ConditionCard
                    body-style="padding: 24px"
                    class="groupList-addUser"
                    @search="queryTableList"
                    @reset="reset"
                >
                    <el-form
                        ref="queryForm"
                        :model="queryForm.condition"
                        label-width="80px"
                        label-suffix="："
                    >
                        <el-row :gutter="2">
                            <el-col :span="8">
                                <el-form-item :label="$t('statistics.generalSchoolYear')">
                                    <GradeSelect v-model="queryForm.condition.grade"></GradeSelect>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item :label="$t('statistics.college')">
                                    <DictSelect
                                        labelAll="请选择"
                                        v-model="queryForm.condition.faculty"
                                        :data="options.faculty"
                                    ></DictSelect>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item :label="$t('statistics.collegeCode')">
                                    <el-input v-model="queryForm.condition.facultyCode"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </ConditionCard>
            </el-tab-pane>
        </el-tabs>
        <el-card style="margin-top:16px">
            <el-row type="flex" justify="space-between" align="center" style="margin-bottom:16px">
                <el-col :span="12">
                    <h1>{{$t('statistics.statisticalList')}}</h1>
                </el-col>
                <el-col :span="12" style="text-align:right">
                    <el-button type="primary" @click="downLoad">{{$t('statistics.clickUpload')}}</el-button>
                </el-col>
            </el-row>
            <edu-table
                :order="false"
                :data="tableList"
                :total="queryForm.total_"
                :pageSize="queryForm.pageSize_"
                @page-change="onCurrentPageChange"
                @selection-change="handleSelectionChange"
            >
                <el-table-column
                    v-for="(item, index) in tableColumnList"
                    :key="index"
                    :label="item.label"
                    :prop="item.prop"
                    :width="item.width"
                    show-overflow-tooltip
                ></el-table-column>
            </edu-table>
        </el-card>
    </div>
</template>

<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import {
    queryStatis,
    exportExcelList
} from 'common/src/api/internationalExchanges/creditAuthorizationSwitch'
let tableColList =
    /**
     * parentId
     *  A:共有属性
     *  C:专业属性
     *  F:学院属性
     */
    [
        {
            label: '年级',
            prop: 'grade',
            parentId: 'A',
            width: 180
        },
        {
            label: '专业代码',
            prop: 'profession',
            parentId: 'C'
        },
        {
            label: '专业',
            prop: 'professionI18n',
            parentId: 'C'
        },
        {
            label: '学院',
            prop: 'facultyI18n',
            parentId: 'A'
        },
        {
            label: '学院代码',
            prop: 'faculty',
            parentId: 'F'
        },
        {
            label: '境外交流生人数',
            prop: 'outLandsCount',
            parentId: 'A',
            width: 120
        },
        {
            label: '留学生人数',
            prop: 'abroadCount',
            parentId: 'A',
            width: 120
        },
        {
            label: '交流派出人数',
            prop: 'sendCount',
            parentId: 'A',
            width: 120
        }
    ]

export default {
    data() {
        return {
            activeName: 'course',
            queryForm: {
                total_: 0,
                pageNum_: 1,
                pageSize_: 20,
                condition: {
                    exportType: '0',
                    grade: new Date().getFullYear(),
                    faculty: '',
                    facultyCode: '',
                    profession: '',
                    professionCode: ''
                }
            },
            tableList: [],
            multipleSelection: [],
            tableColumnList: [],
            options: {
                faculty: [],
                profession: []
            }
        }
    },
    mounted() {
        this.tableColumnList = this.queryColumnList()
        this.initOptions()
        this.queryTableList()
    },
    methods: {
        initOptions() {
            const data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['X_YX']
            }
            queryDic(data).then(res => {
                if (res.code === 200) {
                    UTILS.fillSelect(
                        {
                            faculty: 'X_YX'
                        },
                        res.data,
                        this.options
                    )
                }
            })
        },
        async queryTableList(params = this.queryForm) {
            let { code, data } = await queryStatis(params)
            if (code !== 200) return
            this.tableList = data.list
            this.queryForm.total_ = data.total_
            this.queryForm.pageSize_ = data.pageSize_
            this.queryForm.pageNum_ = data.pageNum_
        },
        handleClick(tab) {
            this.activeName = tab.name
            this.tableColumnList = this.queryColumnList()
            if (this.activeName == 'course') {
                this.queryForm.condition.exportType = '0'
            } else {
                this.queryForm.condition.exportType = '1'
            }
            this.queryTableList()
        },
        queryColumnList() {
            let list
            if (this.activeName == 'course') {
                list = tableColList.filter(item => item.parentId !== 'F')
            } else {
                list = tableColList.filter(item => item.parentId !== 'C')
            }
            return list
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        onCurrentPageChange(pager) {
            this.queryForm.pageSize_ = pager.pageSize
            this.queryForm.pageNum_ = pager.pageNum
            this.queryTableList()
        },
        // 根据学院获取专业
        handleChangeFaculty(val) {
            this.options.profession = []
            this.queryForm.condition.profession = ''
            const data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['G_ZY'],
                filter: {
                    prefix: [val],
                    specilaCode: 'XY2ZY',
                    facultys: [this.queryForm.condition.faculty]
                }
            }
            queryDic(data).then(res => {
                if (res.code === 200)
                    UTILS.fillSelect(
                        {
                            profession: 'G_ZY'
                        },
                        res.data,
                        this.options
                    )
            })
        },
        loadDown(){
            this.queryTableList()
        },
        downLoad() {
            let list = this.multipleSelection.map(item =>
                this.activeName === 'course' ? item.profession : item.faculty
            )
            let params = Object.assign(
                this.queryForm.condition,
                this.activeName === 'course'
                    ? {
                          professionList: list
                      }
                    : {
                          facultyList: list
                      }
            )
            exportExcelList(params)
        },
        reset() {
            let condition = this.queryForm.condition
            for (let key in condition) {
                if (key == 'exportType') {
                    condition[key] = 0
                } else if (key !== 'grade') {
                    condition[key] = ''
                }
            }
            this.queryForm.total_ = 0
            this.queryForm.pageNum_ = 1
            this.queryForm.pageSize_ = 20
            this.queryTableList()
        }
    }
}
</script>

<style>
</style>
